<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康证预览系统</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <script>
        // 检查QRCode库是否已加载，如果未加载，使用备用源
        window.addEventListener('load', function() {
            if (typeof QRCode === 'undefined') {
                console.error("主QRCode库加载失败，尝试加载备用库");
                var script = document.createElement('script');
                script.src = "https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js";
                document.head.appendChild(script);
            }
        });
    </script>
</head>
<body>
    <div class="system-title">
        <h1>健康证查询系统</h1>
    </div>
    
    <div class="health-card" id="healthCard">
        <div class="card-content">
            <div class="info-section">
                <div class="left-info">
                    <h1>预防性健康合格证明</h1>
                    <div class="info-row">
                        <div class="info-item"><strong>姓名：</strong><span id="preview-name"></span></div>
                        <div class="info-item"><strong>性别：</strong><span id="preview-gender"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>编号：</strong><span id="preview-id"></span></div>
                        <div class="info-item"><strong>年龄：</strong><span id="preview-age"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>类型：</strong><span id="preview-type"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>工种：</strong><span id="preview-jobType"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>发证日期：</strong><span id="preview-issueDate"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>有效期至：</strong><span id="preview-validDate"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>体检结果：</strong><span id="preview-result"></span></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item"><strong>单位：</strong><span id="preview-unit"></span></div>
                    </div>
                    <div class="info-row hospital-row">
                        <div class="info-item long-text"><strong>检查机构：</strong></div>
                    </div>
                    <div class="info-row">
                        <div class="info-item hospital-name" id="preview-hospital"></div>
                    </div>
                </div>
                <div class="right-info">
                    <div class="photo-container" id="preview-photo-container">照片位置</div>
                    <div class="qrcode-container" id="preview-qrcode-container">二维码位置</div>
                </div>
                <div class="stamp-section">
                    <div class="stamp-container" id="preview-stamp-container"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="actions">
        <button id="regenerateBtn" class="regenerate-btn">重新填写</button>
        <a href="javascript:void(0);" id="manageCardsBtn" class="manage-btn">管理健康证</a>
    </div>

    <script src="js/api.js"></script>
    <script src="js/preview.js"></script>
    <script>
        // 管理健康证按钮点击事件，添加时间戳确保重新加载
        document.getElementById('manageCardsBtn').addEventListener('click', function() {
            const timestamp = new Date().getTime();
            window.location.href = 'query.html?t=' + timestamp;
        });
    </script>
</body>
</html> 